<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:p="http://primefaces.org/ui"
	  xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
>
	 
    <h:head>
        <title>Mantenedor de Productos</title>
    </h:head>
    <h:body>
     	<h1> <p align="center"> Mantenedor de Productos </p> </h1>
		
		<h:form>  
	   		<p:panel header="Nuevo Producto" >  
		        <h:panelGrid columns="3" cellpadding="5" id="agregar" >  	            	
		            	
		            <h:outputText for="id" value="ID: " />  
			        <p:inputText id="id" value="#{cRUDProducto.id}" pt:placeholder="Ej: 1"> 
		                <f:validateLongRange minimum="1" maximum="999"/>
			            <p:clientValidator/>  
			        </p:inputText>  
			        <p:message for="id" display="icon" />  	
				            	
		              
		            <h:outputLabel for="nombre" value="Nombre" />  
		            <p:inputText id="nombre" value="#{cRUDProducto.nombre}" required="true" pt:placeholder="Ej: Producto1">  
		                <f:validateLength minimum="1" maximum="20" />  
		                <p:clientValidator />  
		            </p:inputText>  
		            <p:message for="nombre" display="icon" />    
		              
		         	<h:outputText for="precio" value="Precio:      $" />  
			        <p:inputText id="precio" value="#{cRUDProducto.precio}" pt:placeholder="Ej: 5000"> 
			        	<f:validateLongRange minimum="1" maximum="9999999"/>  
			            <p:clientValidator/>  
			        </p:inputText>  
			        <p:message for="precio" display="icon" /> 		
						              
		          	<h:outputLabel for="descripcion" value="Descripcion" />  
		            <p:inputText id="descripcion" value="#{cRUDProducto.descripcion}" required="true" pt:placeholder="Ej: de color azul">  
		                <f:validateLength minimum="1" maximum="30" />  
		                <p:clientValidator />  
		            </p:inputText>  
		            <p:message for="descripcion" display="icon" />
		            
					
					<h:outputLabel for="categoria" value="Categoria" />  
		            <p:inputText id="categoria" value="#{cRUDProducto.categoria}" required="true" pt:placeholder="Ej: vestuario">  
		                <f:validateLength minimum="1" maximum="15" />  
		                <p:clientValidator />  
		            </p:inputText>  
		            <p:message for="categoria" display="icon" />
					
					<h:outputText for="stock" value="Stock: " />  
			        <p:inputText id="stock" value="#{cRUDProducto.stock}" pt:placeholder="Ej: 3"> 
			        	<f:validateLongRange minimum="1" maximum="999"/>
			            <p:clientValidator/>  
			        </p:inputText>  
			        <p:message for="stock" display="icon" /> 
		          
		            <p:commandButton value="Reset" type="reset" />  
		            <p:commandButton value="Agregar" action="#{cRUDProducto.agregar}" ajax="false" update=":form-list-prod:list-prod agregar" validateClient="true"/>  
		  
		        </h:panelGrid>  
		    </p:panel>   
	    </h:form>
		
		<br></br><br></br>
		
		<h:form id="form-list-prod">  
		  
		    <p:growl id="message" showDetail="true"/>  
		  
		    <p:dataTable var="producto" value="#{cRUDProducto.arrProd}" id="list-prod" editable="true">  
		  
		        <f:facet name="header">  
		            Listado de Productos 
		        </f:facet>  
		  
		        <p:ajax event="rowEdit" listener="#{cRUDProducto.onEdit}" update=":form-list-prod:message" />  
		        <p:ajax event="rowEditCancel" listener="#{cRUDProducto.onCancel}" update=":form-list-prod:message" /> 
		  
		        <p:column headerText="ID" style="width:30%">  
		        	<h:outputText value="#{producto.id}" />  
		        </p:column>  
		  
		        <p:column headerText="Nombre" style="width:20%">  
		            <p:cellEditor>  
		                <f:facet name="output">  
		                    <h:outputText value="#{producto.nombre}" />  
		                </f:facet>  
		                <f:facet name="input">  
		                    <p:inputText value="#{producto.nombre}" style="width:100%">
		                    	<f:validateLength minimum="1" maximum="20" />  
		                    </p:inputText>  
		                </f:facet>  
		            </p:cellEditor>  
		        </p:column>  
		  	
		  		<p:column headerText="Precio" style="width:20%">  
		            <p:cellEditor>  
		                <f:facet name="output">  
		                    <h:outputText value="#{producto.precio}" />  
		                </f:facet>  
		                <f:facet name="input">  
		                    <p:inputText value="#{producto.precio}" style="width:100%" >  
		                    	<f:validateLongRange minimum="1" maximum="9999999"/>
		                    </p:inputText>  
		                </f:facet>  
		            </p:cellEditor>  
		        </p:column> 
		        
		        <p:column headerText="Descripcion" style="width:20%">  
		            <p:cellEditor>  
		                <f:facet name="output">  
		                    <h:outputText value="#{producto.descripcion}" />  
		                </f:facet>  
		                <f:facet name="input">  
		                    <p:inputText value="#{producto.descripcion}" style="width:100%">
		                    	<f:validateLength minimum="1" maximum="20" />  
		                    </p:inputText>  
		                </f:facet>  
		            </p:cellEditor>  
		        </p:column> 
		        
		        <p:column headerText="Categoria" style="width:20%">  
		            <p:cellEditor>  
		                <f:facet name="output">  
		                    <h:outputText value="#{producto.categoria}" />  
		                </f:facet>  
		                <f:facet name="input">  
		                    <p:inputText value="#{producto.categoria}" style="width:100%" > 
		                  		<f:validateLength minimum="1" maximum="15" />  
		                    </p:inputText> 
		                </f:facet>  
		            </p:cellEditor>  
		        </p:column>  
		        
		          <p:column headerText="Stock" style="width:20%">  
		            <p:cellEditor>  
		                <f:facet name="output">  
		                    <h:outputText value="#{producto.stock}" />  
		                </f:facet>  
		                <f:facet name="input">  
		                    <p:inputText value="#{producto.stock}" style="width:100%">  
		                    	<f:validateLongRange minimum="1" maximum="999"/>
		                    </p:inputText>
		                </f:facet>  
		            </p:cellEditor>  
		        </p:column>    
		        
		  
		        <p:column headerText="Editar" style="width:6%">  
		            <p:rowEditor />  
		        </p:column>  
		        
		        <p:column headerText="Eliminar" style="width:6%">  
		            <p:commandButton icon="ui-icon-closethick" action="#{cRUDProducto.eliminar(producto.id)}" update=":form-list-prod:list-prod"/>  
		        </p:column>  
		  
		    </p:dataTable>  
		  
		</h:form>  
		
		
		
		
		
	
    </h:body>
</html>